


找到热更新慢的原因：
1.首先可以在package中的启动命令加上 --progress --watch --profile
--progress 构建进度
--watch 实时监测
--profile 编译过程中的步骤耗时时间
加上这几个参数，重启项目，就可以开始观察耗时时间了，修改了某个文件之后，查看控制台 
2275ms addtional asset processing

找到耗时最长的资源

2.使用了uglifyJsPlugin插件，这么一想，我的项目中的webpack配置中也用到了这个插件，
于是把这个插件移到生产环境中使用，修改之后重启项目


1. 使用Webpack的`HotModuleReplacementPlugin`插件：确保在Webpack配置文件中启用了该插件。这个插件可以使热更新功能生效，并且可以减少热更新的延迟时间。

2. 使用Webpack的`devServer`配置项：在Webpack配置文件中，通过`devServer`配置项来配置开发服务器。可以设置`hot: true`来启用热更新功能，以及`inline: true`来将热更新的代码注入到打包后的文件中，减少热更新的延迟时间。

3. 使用Webpack的`watchOptions`配置项：在Webpack配置文件中，通过`watchOptions`配置项来配置文件监听的选项。可以设置`aggregateTimeout`和`poll`来调整监听的延迟时间和轮询间隔，以提高热更新的速度。

4. 使用Webpack的`cache`配置项：在Webpack配置文件中，通过`cache`配置项来启用缓存。可以设置`cache.type`为`memory`或`filesystem`，以及`cache.cacheDirectory`来指定缓存的目录。启用缓存可以减少重新编译的时间，提高热更新的速度。

5. 调整Webpack的构建性能配置：可以通过调整Webpack的构建性能配置来提高热更新的速度。例如，可以增加`devtool`的配置级别，减少生成Source Map的复杂度；可以使用`babel-loader`的缓存选项来缓存转译结果等。

需要注意的是，热更新的速度还受到其他因素的影响，如项目的复杂度、硬件性能等。以上配置方法可以帮助提高热更新的速度，但具体的效果还需根据项目的实际情况进行调试和优化。

一、分模块进行打包
例如开发阶段开发指定页面/模块时只进行指定
块的构建,通过给webpack传参的方式。

二、通过多线程的方式构建模块
在构建上,可以引入
happypack
thread-loader
的方式,通过多线程加快webpack的编译速度。

1.使用 cache-loader
在一些性能开销较大的 loader 之前添加 cache-loader，以将结果缓存到磁盘里，显著提升二次构建速度
比如：file-loader,image-loader,babel-loader,
保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.ext$/,
                use: ['cache-loader', ...loaders],
                include: path.resolve('src'),
            },
        ],
    },
};
2.terser 启动多线程
使用多进程并行运行来提高构建速度

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};
3.合理使用 sourceMap
打包生成 sourceMap 的时候，如果信息越详细，打包速度就会越慢。
3.使用缓存：Webpack提供了缓存功能，可以缓存已经生成的Source Map，以减少重复生成的时间。
可以通过配置`devtool`选项的`cache`属性，启用Source Map的缓存功能。

4.优化 resolve.alias
alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./../../的形式

通过配置alias以减少查找过程

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}
5.优化 resolve.modules
resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为['node_modules']，
所以默认会从node_modules中查找文件，当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时，
所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // 其中 __dirname 表示当前工作目录，也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};
6.优化loader配置
在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader

如采用 ES6 的项目为例，在配置 babel-loader 时，可以这样：

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};